<template>
  <MainLayout>
    <router-view></router-view>
    <el-card>
    <h3>数据分析</h3>
    
    <!-- 数据筛选 -->
    <el-form :inline="true" class="filter-form">
      <el-form-item label="时间范围">
        <el-date-picker
          v-model="filter.dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item label="数据类型">
        <el-select v-model="filter.dataType" placeholder="请选择数据类型">
          <el-option label="销售数据" value="sales" />
          <el-option label="用户数据" value="users" />
          <el-option label="产品数据" value="products" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="applyFilter">筛选</el-button>
        <el-button @click="resetFilter">重置</el-button>
      </el-form-item>
    </el-form>
    
    <!-- 数据展示 -->
    <el-row :gutter="20" class="chart-row">
      <el-col :span="12">
        <el-card>
          <h4>趋势分析</h4>
          <el-table :data="trendData.labels.map((label, index) => ({
            date: label,
            value: trendData.datasets[0].data[index]
          }))">
            <el-table-column prop="date" label="日期" />
            <el-table-column prop="value" label="销售额" />
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <h4>占比分析</h4>
          <el-table :data="ratioData.labels.map((label, index) => ({
            type: label,
            value: ratioData.datasets[0].data[index]
          }))">
            <el-table-column prop="type" label="数据类型" />
            <el-table-column prop="value" label="占比">
              <template #default="{ row }">
                <el-progress :percentage="row.value" />
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 数据导出 -->
    <div class="export-section">
      <el-button type="success" @click="exportData">导出数据</el-button>
    </div>
  </el-card>
  </MainLayout>

</template>

<script>
import MainLayout from '@/layouts/MainLayout.vue'
export default {
  components: {
    MainLayout
  },
  data() {
    return {
      filter: {
        dateRange: [],
        dataType: ''
      },
      trendData: {
        labels: [], // 确保初始化为数组
        datasets: [
          {
            label: '销售额',
            backgroundColor: '#409EFF',
            data: []
          }
        ]
      },
      ratioData: {
        labels: [], // 确保初始化为数组
        datasets: [
          {
            backgroundColor: ['#67C23A', '#E6A23C', '#F56C6C'],
            data: []
          }
        ]
      }
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.trendData = { ...this.trendData };
      this.ratioData = { ...this.ratioData };

      // 模拟趋势分析数据
      this.trendData.labels = ['1月', '2月', '3月', '4月', '5月', '6月'];
      this.trendData.datasets[0].data = [200, 300, 400, 500, 600, 700];

      // 模拟占比分析数据
      this.ratioData.labels = ['销售数据', '用户数据', '产品数据'];
      this.ratioData.datasets[0].data = [30, 45, 25];
    });
  },
  methods: {
    applyFilter() {
      // 应用筛选条件
      console.log('应用筛选条件:', this.filter);
    },
    resetFilter() {
      this.filter = {
        dateRange: [],
        dataType: ''
      };
    },
    exportData() {
      // 导出数据逻辑
      this.$message.success('数据导出成功');
    }
  }
};
</script>

<style scoped>
.filter-form {
  margin-bottom: 20px;
}

.chart-row {
  margin-bottom: 20px;
}

.chart-row h4 {
  margin-bottom: 15px;
}

.export-section {
  text-align: right;
  margin-top: 20px;
}
</style>